<template>
  <div class="out">
    <div class="m-profile-panel">
      <div class="panel-heading">
            <span>
              权限管理
            </span>
      </div>
      <div class="introduction" style="height: 300px">
        <span>
          <span>当前权限 : </span>
        <el-tag>{{getRoleName(userInfo.role)}}</el-tag>
        </span>
        <div v-if="!nowReq">
          <el-button v-if="userInfo.role < 3" @click="modalVisible = true">申请提升权限</el-button>
          <span v-else>您已获得最高权限</span>
        </div>
        <div v-else>
          <el-card class="box-card"
                   shadow="hover">
            <template #header>
              <div class="s-title">
                当前申请
              </div>
            </template>
            <div class="s-summary">
              权限 ： <el-tag>{{ getRoleName( nowReq.role) }}</el-tag><br>
              理由： {{nowReq.reason}}
            </div>
          </el-card>
        </div>

      </div>
    </div>
  </div>
  <el-dialog v-model="modalVisible" title="提问" width="600px" >
    <el-form label-width="80px">
      <el-form-item label="权限">
        <el-radio v-model="role" label="2" :disabled="userInfo.role >= 2">教师</el-radio>
        <el-radio v-model="role" label="3" :disabled="userInfo.role >= 3">管理员</el-radio>
      </el-form-item>
      <el-form-item label="原因">
        <el-input v-model="reason" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {User} from "../utils/http/user";

export default {
  name: "PeCenter",
  data:function (){
    return{
      reason:"",
      role : "2",
      modalVisible : false,
      nowReq : null
    }
  },
  methods:{
    getRoleName : User.getRoleName,
    async onSubmit(){
      let resp = await User.peReq({role:parseInt(this.role),reason:this.reason})
      if (resp.success){
        this.$success("申请已提交")
        this.refresh()
        this.modalVisible = false
      }else {
        this.$error("申请提交失："+resp.message)
      }
    },
    async refresh(){
      let resp = await User.peGet()
      if (resp.success &&  resp?.data?.id !== 0){
        this.nowReq = resp.data
      }
    }
  },
  computed:{
    userInfo(){
      return this.$store.state.userInfo??{}
    }
  },
  async mounted() {
    this.refresh()
  }
}
</script>

<style scoped>

.introduction{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  width: 200px;
  margin: 0 auto;
}

.out{
  width: 600px;
  margin: 30px auto;
}
.m-profile-panel {
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 2.0rem;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
  background: white;
}

.m-profile-panel > .panel-heading {
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  background-color: #F5F5F5;
}

.m-profile-panel > .panel-heading > span {
  font-size: 1.0rem;
}

.m-profile-panel > .panel-heading > a {
  text-decoration: none;
}

.m-profile-panel > .panel-heading > a:hover {
  background-color: #DDD;
  color: #000;
}

.m-profile-panel > .panel-body {
  display: flex;
  padding-bottom: 20px;
}

.m-profile-panel > .panel-body > .user {
  display: flex;
  flex-direction: column;
}

.m-profile-panel > .panel-body > .user > .ranking > img {
  margin-right: 0.3rem;
  width: 18px;
  height: 18px;
}

.m-profile-panel > .panel-body > .user > .social > img {
  width: 32px;
  height: 32px;
}

.m-profile-panel > .panel-body > img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  margin: 0 1.2rem;
}

.m-profile-panel > .panel-body > ul {
  width: 100%;
  padding-inline-start: 0px;
  margin-block-end: 0px;
}

.m-profile-panel > .panel-body > ul > svg {
  margin-top: 2.0rem;
}

.m-profile-panel > .panel-body > ul > li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #ddd;
}

.m-profile-panel > .panel-body > ul > li > span:last-child {
  background-color: #5cb85c;
  color: #FFF;
  font-size: 0.8rem;
  font-weight: bold;
  min-width: 10px;
  padding: 0px 5px;
  border-radius: 10px;
}

.m-profile-panel > .panel-body > ul > li > span > img {
  width: 18px;
  height: 18px;
  margin-top: -0.2rem;
  margin-right: 0.3rem;
}

</style>
